<template>
    <a-layout class="layout-wrapper">
        <!-- 内容 -->
        <a-layout-content class="content-layout-wrapper">
            <div class="banner">
                <!-- 描述 -->
                <div class="banner-text">
                    <h1>CJLGB 云平台</h1>
                    <p>
                        <span>开源中国热门开源项目&nbsp;</span>
                        <a target="_blank" href='https://gitee.com/cjlgb/cjlgb-cloud-platform/stargazers'>
                            <img src='https://gitee.com/cjlgb/cjlgb-cloud-platform/badge/star.svg?theme=dark' alt='star' />
                        </a>
                    </p>
                    <p>基于Spring Cloud最完美实践</p>
                    <p>简单 快捷 开启微服务之旅</p>
                </div>
                <!-- 登录方式 -->
                <div class="form-wrapper">
                    <!-- 表单 -->
                    <slot />
                    <!-- 温馨提示 -->
                    <p class="tip-wrap">温馨提示:</p>
                    <p class="tip-wrap" style="line-height: 19px;">请务必加强您的账户及密码信息的保护工作,切勿向任何人泄漏您的相关信息,避免您的账户发生被盗风险。</p>
                </div>
            </div>
            <!-- 底部 -->
            <a-layout-footer class="footer-layout-wrapper tip-wrap">
                <span style="margin-right: 15px;">Copyright ©2020 Created by WFT. All Rights Reserved.</span>
                <a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn">闽ICP备20001762号</a>
            </a-layout-footer>
        </a-layout-content>
    </a-layout>
</template>

<style scoped>
    .layout-wrapper{
        height: 100%;
        background-size: 19% 100%;
        background-image: url();
        background-color: #F6F8FB;
        background-repeat: repeat-y;
        background-position: top right;
    }
    .layout-wrapper .content-layout-wrapper{
        min-width: 1200px;
        height: 100%;
        flex: none;
        margin: 0 auto;
        padding: 150px 0 0;
        background: url() top right repeat-y;
        background-size: 200px;
    }
    .content-layout-wrapper .banner{
        overflow: hidden;
        padding: 10px 0;
        background: url(//cjlgb-design-oauth.cdn.bcebos.com/images/1594018440063.png) no-repeat center;
        background-size: 50%;
    }
    /* 项目描述 */
    .banner-text{
        float: left;
        margin: 90px 0 0 45px;
    }
    .banner-text h1{
        font-size: 36px;
    }
    /* 表单 */
    .form-wrapper{
        background-color: #FFF;
        padding: 50px;
        width: 400px;
        float: right;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.09);
        border-radius: 5px;
    }
    /* 页脚 */
    .layout-wrapper .footer-layout-wrapper{
        width: 1200px;
        margin: -44px auto 0;
        background-color: transparent;
        padding: 10px 50px;
    }
    .tip-wrap{
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 0;
        color: rgba(46, 51, 65, 0.66);
    }
</style>
